import React from 'react'
import { Layout } from 'antd';
import MenuRoutes from '../router/menuRouter' 

// import SideBar from '../components/SideBar/SideBar'
const SideBar = React.lazy(() => import('../components/SideBar/SideBar'));

// import Header from '../components/Header/Header'
const Header = React.lazy(() => import('../components/Header/Header'));


const { Content, Footer } = Layout;

function Index() {
  return (
    <Layout
      style={{
        minHeight: '100vh',
      }}
    >
      {/* 侧边栏菜单 */}
      <SideBar></SideBar>

      <Layout className="site-layout">
        <Header></Header>
        <Content
          style={{
            margin: '0 16px',
            overflow: 'auto'
          }}
        >
          <div
            className="site-layout-background"
            style={{
              padding: 24,
              minHeight: 360,
            }}
          >
            <MenuRoutes/>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  )
}

export default Index